<template>
    <el-dialog v-model="show" title="新增菜单" width="500">
        <el-form :model="form" label-width="100px">
            <el-form-item label="菜单名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入菜单名称" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
                <div @click="openIconsDialog" class="icon-container">
                    <el-icon :size="32">
                        <component :is="form.icon" />
                    </el-icon>
                </div>
            </el-form-item>
            <el-form-item label="上级" prop="father">
                <el-select v-model="form.father" placeholder="请选择上级" @change="chnageFather">
                    <el-option v-for="item in fathers" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="路由路径" prop="path">
                <el-input v-model="form.path" placeholder="请输入路由路径" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input type="number" v-model="form.sort" placeholder="请输入排序" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="sureEditMenu">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <IconListView ref="iconRef" />
</template>

<script setup>
import { ref } from 'vue'
import IconListView from './icon-list-view.vue'
import api from '@/apis'
const $emit = defineEmits(['initMenus'])
const props = defineProps({
    menus: {
        type: Array,
        default: () => []
    },
    currentMenu: {  // 新增当前菜单prop
        type: Object,
        default: () => ({})
    }
})
const show = ref(false)
const form = ref({})
const fathers = ref([])
const handleOpen = () => {
    init()
    show.value = true
}

const handleClose = () => {
    show.value = false
}

// 修改初始化方法
const init = () => {
    const timer = setTimeout(() => {
        form.value = JSON.parse(JSON.stringify(props.currentMenu))
        fathers.value = props.menus.filter(item => item.father == 0)
        fathers.value.unshift({ name: '无', id: 0 })
        clearTimeout(timer)
    }, 0);
}

// 修改提交方法
const sureEditMenu = () => {  // 方法名改为sureEditMenu
    if (!form.value.name) {
        ElMessage.error('请输入菜单名称')
        return
    }
    if (!form.value.icon) {
        ElMessage.error('请输入图标')
        return
    }
    if (!form.value.father && (form.value.father != 0)) {
        ElMessage.error('请选择上级')
        return
    }
    if (!form.value.path) {
        ElMessage.error('请输入路由路径')
        return
    }
    if (!form.value.sort) {
        ElMessage.error('请输入排序')
        return
    }
    api.menus.updateMenu(form.value).then(res => {  // 改为更新接口
        if (res.code == 200) {
            handleClose()
            $emit('initMenus')
        }
    })
}

const chnageFather = (id) => {
    const father = props.menus.find(item => item.id == id)
    form.value.path = father ? father.path + '/' : '/'
}


const iconRef = ref(null)
const openIconsDialog = () => {
    iconRef.value.openIconList()
}

// 暴露方法保持不变
defineExpose({
    handleOpen
})
</script>

<style scoped>
.icon-container {
 cursor: pointer;
}
</style>